<template>
	<transition name="login-page">
		<div id="login-page" v-show="showLoginPage">
			<transition name="login-container">
				<div class="container" v-show="showLoginPage">
					<div class="page-header">
						<b-icon-x class="close-btn" @click="cancelLogin"></b-icon-x>
						<p style="cursor: pointer;" @click="changeLoginMethods">{{ !tel_login ? "手机号登录" : "密码登录" }}</p>
					</div>
					<div class="login-page-content">
						<p class="login-title">{{ tel_login ? "手机号登录" : "密码登录" }}</p>
						<p>
							<b-form-input name="telphone" maxlength="11" class="login-input" placeholder="请输入手机号" v-model="login_form.username" />
						</p>
						<p>
							<div v-show="tel_login">
								<b-form-input name="vcode" maxlength="6" class="login-input vcode-input" placeholder="请输入验证码"  v-model="login_form.vcode" />
								<b-button class="get-vcode" ref="vcodeBtn" @click="sendVcode">获取验证码</b-button>
								<div class="clear"></div>
							</div>
							<div v-show="!tel_login">
								<b-form-input name="password" type="password" class="login-input" placeholder="请输入密码" v-model="login_form.password" />
							</div>
						</p>
						<p>
							<b-button class="login-btn" @click="toLogin" ref="login_btn">
								<div v-if="login_loading" class="spinner-border text-light" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div v-else>
									同意协议并登录
								</div>
							</b-button>
							<small class="login-tips">
								未注册手机号登录后将自动生成账号，且代表你已阅读并同意<a href="#">《用户服务协议》</a>、<a href="#">《隐私政策》</a>
							</small>
						</p>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
	import {BIcon, BIconX } from 'bootstrap-vue'
	
	export default {
		inject: [
			'close_login',
			'reload_view',
			'refresh_token'
		],
		components: {
			BIcon,
			BIconX
		},
		data() {
			return {
				showLoginPage: false,
				display: false,
				tel_login: true,
				vcodeBtnDisabled: false,
				refreshTime: 0,
				login_loading: false,
				login_form: {
					is_vcode_login: true,
					username: '',
					vcode: '',
					password: ''
				}
			};
		},
		props: {
			value: {},
			tencentCaptchaId: ''
		},
		methods: {
			page_display() {
				this.display = !this.display;
			},
			cancelLogin() {
				this.close_login();
			},
			closeLogin() {
				this.close_login();
				this.reload_view();
			},
			resetSmsBtn(){
				this.setVcodeBtn("获取验证码", false);
			},
			sendVcode(){
				if(!/\d{11}/.test(this.login_form.username))
					return this.$msg('请输入正确的手机号码');
				
				if(!this.vcodeBtnDisabled) {
					this.setVcodeBtn("验证中...");
					// 接入腾讯防水墙验证码
					// 具体文档参考：https://007.qq.com/web-access.html
					let captcha = new TencentCaptcha(this.tencentCaptchaId, (res) => {
						// res.ret == 0: 验证成功 res = {ret: 0, ticket: "String", randstr: "String"}
						if(res.ret == 0) {
							this.setVcodeBtn("发送中...");
							let request_body = {
								username: this.login_form.username,
								ticket: res.ticket,
								randstr: res.randstr
							};
							
							this.$axios.post('/user/sendSms', request_body).then((resp) => {
								// 后端返回成功 开始倒计时
								if(resp.ret == 0) {
									this.refreshTime = 60;
									this.setVcodeBtn(this.refreshTime);
									// 验证码重发开关定时器
									let vcodeTimer = setInterval(() => {
										this.refreshTime --;
										if(this.refreshTime > 0)
											this.setVcodeBtn(this.refreshTime);
										else{
											this.resetSmsBtn();
											clearInterval(vcodeTimer);
										}
									}, 1000);
								} else {
									// 发送失败重开发送按钮
									this.resetSmsBtn();
								}
							}).catch((e) => {
								this.resetSmsBtn();
								this.$msg('发送失败，稍后重试');
							});
						} else {
							// res.ret == 2: 用户主动取消验证 res = {ret: 2, ticket: null}
							this.resetSmsBtn();
							if(res.ret != 2) this.$msg('未知错误，稍后重试');
						}
					});
					captcha.show();
				}
			},
			changeLoginMethods() {
				this.tel_login = !this.tel_login;
				this.login_form.is_vcode_login = !this.login_form.is_vcode_login;
			},
			setVcodeBtn(text, disabled = true){
				this.$refs.vcodeBtn.innerText = text;
				this.vcodeBtnDisabled = disabled;
				this.$refs.vcodeBtn.disabled = disabled;
			},
			toLogin(){
				this.$refs.login_btn.disabled = true;
				this.login_loading = this.$refs.login_btn.disabled;
				
				// this.loginBtnLoading = true;
				this.$axios.post('/user/login', this.login_form).then((resp) => {
					// 状态码正常，登录成功
					if(resp.ret == 0){
						// 登录成功后关闭登录页，取得access_token，并且通知父页重载页面组件
						this.refresh_token(resp.data.access_token);
						this.closeLogin();
						this.reload_view();
					}
					
					this.$refs.login_btn.disabled = false;
					this.login_loading = this.$refs.login_btn.disabled;
				}).catch((resp) => {
					this.$msg('未知错误，稍后重试');
					
					this.$refs.login_btn.disabled = false;
					this.login_loading = this.$refs.login_btn.disabled;
				});
			}
		},
		mounted() {
			this.showLoginPage = this.value;
		},
		watch: {
			value(newVal, oldVal){
				this.showLoginPage = newVal;
				this.display = this.value;
			}
		}
	}
</script>

<style>
	#login-page {
		z-index: 1999999999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	#login-page .container {
		margin-top: 3vh;
		padding: 10px;
		height: 97vh;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.login-page-enter-active, .login-page-leave-active {
		transition: all .3s ease;
	}
	.login-page-enter-active {
		opacity: 1;
	}
	.login-page-leave-to {
		opacity: 0;
	}
	
	.login-container-enter-active, .login-container-leave-active {
		transition: all .2s ease;
	}
	.login-container-enter, .login-container-leave-to {
		transform: translateY(6.25rem);
		opacity: 0;
	}
	
	.close-btn {
		float: left;
		font-size: 1.5625rem;
	}
	
	.page-header {
		height: 20px;
		margin: 0.3125rem auto;
	}
	.page-header p {
		float: right;
		margin-right: 5px;
		font-size: 0.9375rem;
	}
	
	.login-title {
		font-size: 1.5625rem;
		margin-left: 0.3125rem;
	}
	
	.login-input {
		border: 0;
		border-bottom: 1px solid #ced4da;
		border-radius: 0;
	}
	.login-input:focus {
		border-color: #80bdff;
		box-shadow: none;
	}
	
	.vcode-input {
		float: left;
	}
	.get-vcode {
		float: right;
		width: 6.5rem;
		margin-right: 0.3125rem;
		border-radius: 0.9375rem;
		padding: 0.125rem 0.625rem;
		margin-top: -2.375rem;
		color: #6c757d;
		background-color: #fff;
	}
	.get-vcode:focus, .get-vcode:hover {
		color: #6c757d;
		background-color: #fff;
		box-shadow: none;
	}
	.get-vcode:disabled {
		color: #aaa;
		background-color: #fff;
		box-shadow: none;
	}
	
	.login-tips {
		font-size: 0.75rem;
		color: #6c757d;
	}
</style>
